<style>
.attenceTable {
    width: 100%;
    border:1px solid #FFF;
    border-right: none;
}
.attenceTable thead {
    width: 100%;
    background-color: #2669B1;
    color: #fff;
}
.attenceTable thead th {
    height: 24px;
    border-right: 1px solid #FFF;
}
.attenceTable tbody tr {
    border-top: 1px solid #FFF;
    background-color: #D3E5FF;
}
.attenceTable tbody tr td {
    border-right: 1px solid #FFF;
}
.attenceTable tbody tr .data-td {
    min-width:30px;text-align: center; 
}
.dateYellow {
    background-color: #FEB726;
}
.dateGreen {
    background-color: #62B87A;
}
.attenceTable .T-firstTd {
    position: relative;
}
.attenceTable .T-firstTd .layui-icon {
    position: absolute;
    left: 0px;
    top: 0px;
    line-height: 12px;
    color: red;
    cursor: pointer;
    display: none;
}
</style>
<script type="text/html" template lay-done="layui.data.attenceUpdateTable(d);">
    <table class="attenceTable">
        <thead>
          <tr>
            <th><div style="width: 40px;text-align:center;white-space:nowrap;">序号</div></th>
            <th><div style="min-width:50px;text-align:center;white-space:nowrap;">姓名</div></th>
            <th><div style="min-width:40px;text-align:center;white-space:nowrap;">日期</div></th>
            {{#
                if(d.params.dates) {
                    layui.each(d.params.dates, function(index,item) {
                        var tdclass = item.state === '0' ? 'dateYellow' : 'dateGreen';
            }}
                <th class={{tdclass}}>{{item.day}}</th>
            {{#
                    })
                }
            }}
          </tr>
        </thead>
        <tbody>
            {{#
                if(d.params.users) {
                    layui.each(d.params.users, function(index,item) {
            }}
            <tr class="T-trClass">
                <td rowspan="2" class="T-firstTd" style="text-align: center;vertical-align:middle;">
                    {{index+1}}
                </td>
                <td rowspan="2" style="text-align: center;vertical-align:middle;white-space:nowrap;">{{item.writeusername}}</td>
                <td style="text-align: center;">上午</td>
            {{#
                layui.each(d.params.dates, function(index,item) {
                    var tdclass = item.state === '0' ? 'dateYellow' : 'dateGreen';
            }}
                <td><div style="min-width:30px;text-align: center;"></div></td>
            {{#
                })
            }}
            </tr>
            <tr>
                <td style="text-align: center;">下午</td>
                {{#
                    layui.each(d.params.dates, function(index,item) {
                        var tdclass = item.state === '0' ? 'dateYellow' : 'dateGreen';
                }}
                    <td><div  style="min-width:30px;text-align: center;"></div></td>
                {{#
                    })
                }}
            </tr>
            {{#
                    })
                }
            }}
        </tbody>
      </table>
</script>
<script>
layui.data.attenceUpdateTable = function (d) { 
    layui.use(['admin'], function(){
        var $ = layui.$,
            delTr = d.params.delTr;

        $('.T-trClass').on('mouseenter',function() {
            $(this).find('.T-firstTd .layui-icon').show();
        });
        $('.T-trClass').on('mouseleave',function() {
            $(this).find('.T-firstTd .layui-icon').hide();
        });

        //点击行删除
        $('.T-trClass .T-firstTd .layui-icon').on('click', function() {
            var id = $(this).data('id');
            delTr(id);
        })
    })
}
</script>